<template>
    <Modal v-model="show" title="增加" @on-ok="ok" :loading="loading">
        <Form ref="orgForm" :model="orgForm" :rules="orgFormRule">
            <Row>
                <Col span="24">
                    <FormItem label="父组织架构名字" prop="parentTreeName">
                        <Input type="text" :maxlength=50 v-model="orgForm.orgParentName" disabled/>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="10">
                    <FormItem label="组织架构名字" prop="orgName">
                        <Input type="text" :maxlength=50 v-model="orgForm.orgName" placeholder="请输入组织架构名字"/>
                    </FormItem>
                </Col>
                <Col span="4" style="text-align: center">&nbsp;&nbsp;</Col>
                <Col span="10">
                    <FormItem label="组织架构编码" prop="orgCode">
                        <Input type="text" :maxlength=50 v-model="orgForm.orgCode" placeholder="请输入组织架构编码"/>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="10">
                    <FormItem label="组织架构负责人" prop="orgContacts">
                        <Input type="text" :maxlength=50 v-model="orgForm.orgContacts" placeholder="请输入组织架构负责人"/>
                    </FormItem>
                </Col>
                <Col span="4" style="text-align: center">&nbsp;&nbsp;</Col>
                <Col span="10">
                    <FormItem label="联系电话" prop="contactsPhone">
                        <Input type="text" :maxlength=50 v-model="orgForm.contactsPhone" placeholder="请输入联系电话"/>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="10">
                    <FormItem label="组织架构编制" prop="orgNum">
                        <Row>
                            <Col span="24">
                                <InputNumber style="width: 100%;" :max="100" :min="1" v-model="orgForm.orgNum"></InputNumber>
                            </Col>
                        </Row>
                    </FormItem>
                </Col>
                <Col span="4" style="text-align: center">&nbsp;&nbsp;</Col>
                <Col span="10">
                    <FormItem label="组织架构图片" prop="orgImg">
                        <Row>
                            <Col span="24">
                                <baseImgUpload ref="orgImg" :maxLength="1" :idImageType="idImageType" :defaultList="defaultList" @getUploadList="getOrgImgUploadList"></baseImgUpload>
                            </Col>
                        </Row>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </Modal>
</template>
<script>
    import {updateOrg,getOrg} from '../../../api/sys/org/org-api';
    import baseImgUpload from '../../../components/upload';

    export default {
        name: 'addOrg',
        components: {
            baseImgUpload
        },
        props: {
            value: {
                type: Boolean,
                default: false
            },
            orgId: {
                type: String
            }
        },
        data() {
            return {
                orgForm: {
                    orgId:'',
                    orgName: '',
                    orgCode: '',
                    orgImg: '',
                    orgContacts: '',
                    contactsPhone: '',
                    orgNum: 1,
                    orgParentId: '0',
                    orgParentName: '顶层节点'
                },
                orgFormRule: {
                    orgName: [
                        {required: true, message: '请输入组织架构名字', trigger: 'blur'},
                        {type: 'string', max: 50, message: '组织架构名字允许输入最大长度为50个字符', trigger: 'blur'}
                    ],
                    orgCode: [
                        {required: true, message: '请输入组织架构编码', trigger: 'blur'},
                        {type: 'string', max: 50, message: '组织架构编码允许输入最大长度为50个字符', trigger: 'blur'}
                    ],
                    orgContacts: [
                        {required: true, message: '请输入组织架构负责人', trigger: 'blur'},
                        {type: 'string', max: 50, message: '组织架构负责人允许输入最大长度为50个字符', trigger: 'blur'}
                    ],
                    contactsPhone: [
                        {required: true, message: '请输入联系电话', trigger: 'blur'},
                        {type: 'string', max: 50, message: '联系电话允许输入最大长度为50个字符', trigger: 'blur'}
                    ],
                    orgImg: [
                        {required: true, message: '请选一张组织架构图片', trigger: 'blur'}
                    ]
                },
                show: false,
                loading: true,
                orgImgUploadList: [],
                idImageType: 'org',
                defaultList:[]
            };
        },
        watch: {
            value(val) {
                this.show = val;
            },
            show(val) {
                //当重新显示增加数据的时候重置整个form表单
                if (val) {
                    this.$refs['orgForm'].resetFields();
                    this.$refs['orgImg'].cleanAll();
                    getOrg({orgId:this.orgId}).then(res=>{
                        if(res.result){
                            this.orgForm = res.entity;
                            this.defaultList = [
                                {
                                    name:this.orgForm.orgImg,
                                    url:this.$config.runConfig.imgUrl + '/' +this.orgForm.orgImg,
                                    status:'finished',
                                    percentage:100
                                }
                            ];
                        }else{
                            this.$Message.success(res.msg);
                            this.closeModal(false);
                        }
                    });
                } else {// 反之则关闭页面
                    this.closeModal(val);
                }
            }
        },
        methods: {
            ok() {
                this.$refs['orgForm'].validate((valid) => {
                    if (valid) {
                        updateOrg(this.orgForm).then(res => {
                            if(res.result){
                                this.$Message.success(res.msg);
                                // 提交表单数据成功则关闭当前的modal框
                                this.closeModal(false);
                                // 同时调用父页面的刷新页面的方法
                                this.$emit('reloadOrg');
                            }else{
                                this.$Message.err(res.msg);
                            }
                        });
                    } else {
                        this.$Message.error('表单验证失败，请检查表单!');
                    }
                    setTimeout(() => {
                        this.loading = false;
                        this.$nextTick(() => {
                            this.loading = true;
                        });
                    },1000);
                });
            },
            closeModal(val) {
                this.$emit('input', val);
            },
            getOrgImgUploadList(val) {
                this.orgImgUploadList = val;
                if (this.orgImgUploadList.length > 0) {
                    this.orgForm.orgImg = this.orgImgUploadList[0].name;
                } else {
                    this.orgForm.orgImg = '';
                }
            }
        }
    };
</script>